<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @input="change"
      :show-action="true"
      @cancel="$router.go(-1)"
    />
    <van-cell-group v-for="(item,index) in list" :key="index" @click="click(item)">
      <van-cell :title="item.communityName"/>
    </van-cell-group>
  </div>
</template>
<script>
import { request, getCity } from "../utils/index.js";
import { setTimeout, clearTimeout } from "timers";
export default {
  data() {
    return {
      value: "",
      cityId: "",
      time: null,
      list: []
    };
  },
  methods: {
    async change(value) {
      clearTimeout(this.time);
      this.time = setTimeout(async () => {
        const res = await request.get("/area/community", {
          params: {
            name: this.value,
            id: this.cityId
          }
        });
        this.list = res.data.body;
      }, 500);
    },
    click(item) {
      this.$router.replace({
        path: "/rent/add",
        query: {
          item
        }
      });
    }
  },
  async created() {
    const res = await getCity();
    this.cityId = res.value;
  }
};
</script>
